<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-weight: bold;font-size: 20px">最近更新</span>
    </div>
    <div class="block">
      <el-timeline v-for="rc in recentchanges.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="rc.id">
        <el-timeline-item :timestamp="rc.timestamp=='2099-01-01' ? '':rc.timestamp " placement="top">
          <el-card>
            <h4>{{rc.title}}</h4>
            <p>{{rc.content}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-pagination
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
  export default {
    name: 'UpdateCard',
    data () {
      return {
        recentchanges:[],
        currentPage: 1,
        pageSize: 2,
        total: 0
      }
    },
    mounted () {
      this.loadrecentchanges()
    },
    methods: {
      loadrecentchanges () {
        this.$axios.get('/recentchanges').then(resp =>{
          if (resp && resp.data.code === 200) {
            this.recentchanges = resp.data.result
            this.total=resp.data.result.length
          }else{
            this.recentchanges = resp.data.result
          }
        }).catch(failinfo =>{
          console.error(JSON.stringify(failinfo))
        })
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage
      }
    }

  }
</script>

<style scoped>
  .box-card {
    margin-top: 5px;
    width: 100%;
    height: 100%;
    text-align: left;
  }
  .el-pagination {
    text-align: center; 
 }
</style>
